<template>
  <el-button type="primary" class="btn" @click="batchExportExcel">批量导出(Excel)</el-button>
  <el-button type="success" class="btn" @click="chooseExportExcel">选择导出(Excel)</el-button>

  <el-table
      :data="customerList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="65"/>
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column property="activityDO.name" label="所属活动"/>
    <el-table-column label="姓名">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.clueDO.fullName }}</a>
      </template>
    </el-table-column>
    <el-table-column property="appellationDO.typeValue" label="称呼"/>
    <el-table-column property="clueDO.phone" label="手机" width="120"/>
    <el-table-column property="clueDO.weixin" label="微信" width="120"/>
    <el-table-column property="needLoanDO.typeValue" label="是否贷款"/>
    <el-table-column property="sourceDO.typeValue" label="线索来源"/>
    <el-table-column property="intentionProductDO.name" label="意向产品"/>
    <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
    <el-table-column label="操作" width="85">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="page"
        @next-click="page"
        @current-change="page"/>
  </p>
</template>





<script>
import {doGet} from "@/http/httpRequest";
import axios from "axios";
import {getJwt, jwtName, messageConfirm, messageTip, removeJwt} from "@/util/util";

export default {
  name: "CustomerView",
  data() {
    return {
      //客户列表对象，初始值是空
      customerList : [{
        clueDO : {},
        ownerDO : {},
        activityDO : {},
        appellationDO : {},
        needLoanDO : {},
        intentionStateDO : {},
        stateDO : {},
        sourceDO : {},
        intentionProductDO : {},
      }],
      //分页时每页显示多少条数据
      pageSize : 0,
      //总共有多少条
      total : 0,
      customerIdArray:[],
    }
  },


  mounted() {
    this.getData(1);
  },

  methods : {
    //获取线索分页列表数据
    getData(current) {
      doGet("/api/customer", {
        current: current //当前页，前面是参数名，后面是参数值
      }).then(resp => {
        if (resp.data.code === 200) {
          this.customerList = resp.data.data.list; // resp.data  =  R 对象
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    }, //分页函数
    page(number) { //number值是element-plus回调时传给我们的，number这个值就是当前页
      this.getData(number);
    },
    exportExcel(ids){
      //检查登录状态 如果过了三十分钟再点击 也是无效过
      let loginData = window.sessionStorage.getItem(jwtName());
      if (!loginData) {
        loginData = window.localStorage.getItem(jwtName());
      }
      //从两处都拿了一下，如果拿到jwt，就把jwt放入请求头中
      if (!loginData) {//表示存在，有值，不是空
        //提示一下，jwt验证未通过，是否需要重新登录
        messageConfirm("登录已失效，是否重新去登录？").then(() => { //点“确定”就执行then()函数
          //后台对jwt验证未通过，那么前台浏览器把jwt都删除一下
          removeJwt();
          //跳转到登录页
          window.location.href = "/";
        }).catch(() => { //点“取消”就执行catch()函数
          messageTip("取消去登录", "warning");
        })
      }else{
        doGet("/api/check",{}).then(resp=>{
          if (resp.data.code===200){
            let iframe = document.createElement("iframe");
            //1、向后端发送请求 （我们实现）
            if (ids){
              iframe.src = axios.defaults.baseURL + "/api/exportExcel?Authorization=" + getJwt()+"&ids="+ids;
            }else {
              iframe.src = axios.defaults.baseURL + "/api/exportExcel?Authorization=" + getJwt();
            }
            document.body.appendChild(iframe);

            //2、后端查询数据库的数据，把数据写入Excel，把Excel以流的方式返回给前端页面（我们实现）
            //3、前端接收Excel文件流，弹出一个下载框，下载这个Excel文件（不需要我们实现，是浏览器本身实现的）
          }
        })

      }

    },

    //批量导出客户Excel
    batchExportExcel() {
     this.exportExcel(null);
    },
    //用户在table表格中勾选或者取消勾选时，会触发执行该函数
    chooseExportExcel(){
      if ( this.customerIdArray.length<=0){
        messageTip("请选择要导出的数据", "warning");
        return;
      }else {
        // ids = "1,3,6,7,11,15";
        let ids = this.customerIdArray.join(",");
        this.exportExcel(ids);
      }

    },
    handleSelectionChange(rowItemArray) {
      this.customerIdArray = [];
      rowItemArray.forEach( rowItem => {
        this.customerIdArray.push(rowItem.id);
      })
    },
    view(id){
      this.$router.push("/dashboard/customer/detail/"+id);
    }

  }
}
</script>


<style scoped>
.el-table {
  margin-top: 10px;
}
</style>